import WebView from 'react-native-webview';
import { ScrollView, StatusBar, View, Button, Text, TextInput, Alert } from 'react-native';
import { TestCase, Tester,TestSuite } from '@rnoh/testerino';
import React, { useRef, useState } from 'react';

export default function WebViewTestInjectJavaScript() {
  return (
    <View style={{ flex:1}}>
        <Tester style={{ paddingBottom: 80 }}>
        <TestSuite name="react-native-webview">
            <TestCase
            key={'webview api injectJavaScript'}
            itShould={`webview api injectJavaScript`}
            tags={['C_API']}
            initialState={false}
            arrange={({ setState }) => {
              const webViewRef = useRef<WebView>(null);
              
              const handleInjectJavaScript = () => {
                 if (webViewRef.current) {
                   // 使用更直接的方法，每次注入都生成唯一的提示框
                   const timestamp = Date.now();
                   const script = `
                     // 修改页面背景色
                     document.body.style.backgroundColor = '#e8f5e8';
                     // 移除之前可能存在的所有提示框
                     const oldAlerts = document.querySelectorAll('[id^="js-injection-alert"]');
                     oldAlerts.forEach(alert => alert.remove());
                     // 添加一个新的提示框，使用唯一ID，不设置自动移除
                     const div = document.createElement('div');
                     div.id = 'js-injection-alert-${timestamp}';
                     div.innerHTML = '✅ JavaScript注入成功！';
                     div.style.cssText = 'position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px; z-index: 9999; font-size: 16px;';
                     document.body.appendChild(div);
                     // 不再设置自动移除，提示框将一直存在
                   `;
                   webViewRef.current.injectJavaScript(script);
                   Alert.alert('injectJavaScript', 'JavaScript代码已成功注入到WebView中！');
                   setState(true);
                 }
               };
              
              return (
                <View style={{ padding: 20, height: 500 }}>
                  <Text style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>
                    injectJavaScript 测试
                  </Text>
                  <Text style={{ fontSize: 12, color: '#666', marginBottom: 10 }}>
                    点击下方按钮向WebView注入JavaScript代码
                  </Text>
                  
                  <Button 
                    title="注入JavaScript" 
                    onPress={handleInjectJavaScript}
                    color="#4CAF50"
                  />
                  
                  <View style={{ height: 300, borderWidth: 1, borderColor: '#ccc', borderRadius: 5, overflow: 'hidden', marginTop: 10 }}>
                    <WebView
                      ref={webViewRef}
                      source={{ uri: 'https://www.baidu.com' }}
                    />
                  </View>
                </View>
              );
            }}
            assert={async ({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          </TestSuite>
        </Tester>
    </View>
  );
}
